//top区域
let topBtn=document.querySelectorAll('.top .middle a')
topBtn.forEach(function(v,i){
    v.onclick=function(){
        topBtn.forEach(function(v2,i2){
            v2.className=''
        })

        v.className='topOn'
    }
})

//api按钮列表数据
let apiTypeData = [
    { name: "全部", keyword: "身份证实名", isnew: false },
    { name: "生活服务", keyword: "银行卡", isnew: false },
    { name: "金融科技", keyword: "短信", isnew: false },
    { name: "交通地理", keyword: "天气", isnew: false },
    { name: "充值缴费", keyword: "短信", isnew: false },
    { name: "数据智能", keyword: "手机归属地", isnew: false },
    { name: "企业工商", keyword: "IP", isnew: false },
    { name: "应用开发", keyword: "手机归属地", isnew: false },
    { name: "电子商务", keyword: "IP", isnew: false },
    { name: "吃喝玩乐", keyword: "视频", isnew: false },
    { name: "文娱视频", keyword: "视频", isnew: false },
    { name: "免费接口大全", keyword: "短信", isnew: true },
    { name: "短信", keyword: "身份证实名", isnew: false },
    { name: "汽车", keyword: "银行卡", isnew: false },
    { name: "核验", keyword: "银行卡", isnew: false },
    { name: "最新发布", keyword: "银行卡", isnew: true },
    { name: "API私有化部署", keyword: "身份证实名", isnew: true },
];
let apiBtnList =document.querySelector('.api-btn-list');
apiTypeData.forEach(function(v,i){
    apiBtnList.innerHTML += `<a href='#' class='${v.isnew? 'bold' : ''}'>${v.name}</a>`

})

let label = document.querySelector('label')
let btnList = document.querySelectorAll('.api-btn-list a');
btnList.forEach(function(v2,i2){
    v2.onclick=function(){
        label.innerHTML = `<span>${apiTypeData[i2].name}</span>
        <input type="text" placeholder="${apiTypeData[i2].keyword}">`
        return false;
    }
})



// 动态渲染api列表
//API列表区域 模拟服务器返回的数据
let listDataArr = [
    //第一行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
  
    //第二行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第三行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第四行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
  
]


let apiList=document.querySelector('.api-list');
listDataArr.forEach(function(v,i){
    apiList.innerHTML+=`<li>
    ${v.isSpecial ? '<span>企业专用</span>' : ''};
    <a href="../pages/APIDetails.html">
        <img src="../images/${v.img}" alt="">
        <p class="title">${v.name}</p>
        <p class="price ${v.price=='免费'? 'green':'red'}">${v.price}</p>
    </a>
    <button>申请数据</button>
</li>`
})

// 模态框的点击跳转和移出隐藏效果
let logBtn = document.querySelectorAll('.api-list button');
let mainMask = document.querySelector('.mask1')
let childMask = document.querySelector('.mask1 .login-right')
logBtn.forEach(function(v,i){
    v.onclick=function(){
        mainMask.style.display='block';
    }
})

mainMask.onclick=function(){
    this.style.display='none';
}

childMask.onclick=function(e){
    e.stopPropagation();
}